<template>
  <div class="order_list components_init">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="clearfix_text">操作</span>
        <span>
          <el-button style="float: right;" type="primary">搜索</el-button>
          <el-button style="float: right;margin-right: 10px;" type="primary">重置</el-button>
          <el-button style="float: right;" type="primary">导出</el-button>
        </span>
      </div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input v-model="formInline.user" placeholder="订单号" />
        </el-form-item>
        <el-form-item label="运单号">
          <el-input v-model="formInline.user" placeholder="运单号" />
        </el-form-item>
        <el-form-item label="装货单位">
          <el-input v-model="formInline.user" placeholder="装货单位" />
        </el-form-item>
        <el-form-item label="卸货单位">
          <el-input v-model="formInline.user" placeholder="卸货单位" />
        </el-form-item>
        <el-form-item label="司机">
          <el-select v-model="formInline.region" placeholder="司机">
            <el-option
              v-for="item in orderStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="formInline.user" placeholder="车牌号" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="formInline.region" placeholder="司机">
            <el-option
              v-for="item in orderStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="formInline.user"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="formInline.user" placeholder="创建人" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card table_card">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column label="日期" width="120">
          <template slot-scope="scope">
            <el-link :underline="false" @click="pushDetail(scope.row.date)">{{ scope.row.date }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="address" label="地址" show-overflow-tooltip />
        <el-table-column prop="address" label="操作" show-overflow-tooltip />
      </el-table>
    </el-card>
    <div class="order_list_pagination">
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderList',
  components: {
  },
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      currentPage4: 4,
      tableBtnIndex: 0,
      // 订单状态选择列表
      orderStatusList: [{
        value: '',
        label: '全部'
      }, {
        value: 'PENDING',
        label: '待提货'
      }, {
        value: 'PROCESSING',
        label: '运输中'
      }, {
        value: 'STOP',
        label: '已送达'
      }, {
        value: 'DONE',
        label: '已完成'
      }, {
        value: 'CANCEL',
        label: '已取消'
      }],
      // 表单筛选按钮列表
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    tableFiltrate(index) {
      this.tableBtnIndex = index
    },
    handleCurrentChange() {

    },
    handleSizeChange() { },
    pushDetail(id) {
      this.$router.push({ path: '/orderManage/orderDetail' })
    },
    // 根据title判断是调付款还是预付款......接口
    centerDialogConfirm() {

    }
  }
}
</script>
<style lang="scss">
.order_list {
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .table_card {
    .el-card__header {
      border: 0;
    }
    .clearfix {
      .clearfix_text {
        button {
          color: #45454b;
          font-weight: 700;
          margin: 0;
          padding: 0 15px;
          border-radius: 0;
        }
        .pitchUpStatus {
          color: #1890ff;
        }
        button:nth-child(n + 2) {
          border-left: 2px solid #45454b;
        }
      }
    }
    .el-card__body {
      padding-top: 0;
    }
  }
  .el-form-item {
    margin-left: 30px;
  }
  .order_list_pagination {
    display: flex;
    justify-content: flex-end;
    width: 98%;
    margin: 20px 0;
  }
}
</style>
